<template>
  <div class="hello">
    <div class="one">
      <div class="two">2</div>
    </div>

  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  components: {},
  props: {
    user: {
      type: String,
      required: false,
    },
  },
  emits: [],
  data() {
    return {};
  },
  created() {

    function myNew(func, ...args) {

      // 1. 创建新对象
      const obj = {};

      // 2. 构建对象与构造函数的原型链
      Object.setPrototypeOf(obj, func.prototype)

      // 3. 通过apply 绑定 构造函数在对象下运行 初始化对象
      let result = func.apply(obj, args);

      return obj;
    }

    // 测试
    function Person(name) {
      this.name = name;
      this.say = function () {
        console.log(`My name is ${this.name}`);
      }
    }

    Person.prototype.sayName = function () {
      console.log(`prototype My name is ${this.name}`);
    }

    let obj1 = myNew(Person, "lobo")

    console.log("obj1-constructor-", obj1.constructor)
    console.log("obj1-prototype-", obj1.__proto__)
    obj1.say()
    obj1.sayName()

  },
  methods: {
    goOtherPage(path) {
      this.$router.push("/" + path);
    },
  },
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
  overflow: hidden;
}

.one {
  width: 100px;
  height: 100px;
  background: pink;
  margin-bottom: 100px;
  overflow: hidden;
  writing-mode: vertical-lr;
  text-align: center;
}

.two {
  display: inline;
  width: 10px;
  height: 10px;
  background: red;
}
</style>
